<template>
  <headPage></headPage>
  <div class="main_box information">
    <titleBack title="修改手机号"></titleBack>
    <div class="steps">
      <div class="steps_item active_steps_item">
        <div class="steps_item_1">1</div>
        <div class="steps_item_2">验证身份</div>
      </div>
      <div class="item_line">
        <div class="item_line_1" v-if="speed == 1"></div>
        <div class="item_line_2" v-if="speed == 2"></div>
      </div>
      <div class="steps_item" :class="speed > 1 ? 'active_steps_item' : ''">
        <div class="steps_item_1">2</div>
        <div class="steps_item_2">设置新手机号</div>
      </div>
      <div class="item_line">
        <div class="item_line_1" v-if="speed == 2"></div>
        <div class="item_line_2" v-if="speed == 3"></div>
      </div>
      <div class="steps_item" :class="speed == 3 ? 'active_steps_item' : ''">
        <div class="steps_item_1">3</div>
        <div class="steps_item_2">设置成功</div>
      </div>
    </div>
    <div class="input_1" v-if="speed == 1">
      <div>原手机号</div>
      <div class="input_1_line"></div>
      <div>{{ userInfo.mobile }}</div>
    </div>
    <div class="input_3" v-if="speed == 2">
      <el-input
        v-model="mobile"
        placeholder="请输入新手机号"
        placeholder-style="color:#bfbfbf;font-size:7px;"
        oninput="if(value.length>11)value=value.slice(0,11)"
        onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
        maxlength="11"
        type="number"
      />
    </div>
    <div class="input_2" v-if="speed == 1 || speed == 2">
      <div class="input_2_1">
        <el-input
          v-model="code"
          placeholder="请输入验证码"
          placeholder-style="color:#bfbfbf;font-size:7px;"
          oninput="if(value.length>4)value=value.slice(0,4)"
          onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
          maxlength="4"
          type="number"
        />
      </div>
      <div class="input_2_2" @click="getCode">{{ codeText }}</div>
    </div>
    <!-- 提交成功 -->
    <div class="success_info" v-if="speed == 3">
      <img class="success_icon" src="../../../assets/my/23.png" alt="" />
      <div class="success_text_1">修改绑定手机成功！</div>
      <div class="success_text_2">新绑定手机号：{{ userInfo.mobile }}</div>
    </div>
    <div class="save_btn" @click="confirmInfo">
      <span v-if="speed == 1 || speed == 2">下一步</span>
      <span v-if="speed == 3">完成</span>
    </div>
  </div>
  <footerPage></footerPage>
</template>


<script name="changePhone" setup>
import {
  post5b5bdc44796e8,
  post5f6db4db8abcf,
  post5f6c915d69d1f,
  post661f7a29c8ae2,
} from "@/utils/api.js";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import titleBack from "../titleBack.vue";
import { validate } from "@/utils/validate";
import { ref, toRefs, inject, watch } from "vue";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";
const router = useRouter();
const userStore = useUserStore();
let { userInfo } = toRefs(userStore);
const is_test = inject("$is_test"); // 是否是测试验证码
const injectMessage = inject("$message");

let mobile = ref(userInfo.value.phone);
let code = ref("");
let speed = ref(1);
watch(speed, (newValue) => {
  code.value = "";
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  codeTime.value = 60;
  codeText.value = "获取验证码";
  is_code.value = false;
  mobile.value = "";
});

function confirmInfo() {
  if (speed.value == 1) {
    if (!code.value) {
      injectMessage.error("请输入验证码");
      return;
    }
    post5f6db4db8abcf({
      mobile: mobile.value,
      code: code.value,
      type: 7,
    })
      .then((res) => {
        // console.log(res);
        if (res.code == 1) {
          mobile.value = "";
          speed.value = 2;
        }
      })
      .catch((err) => {
        console.log(err);
      });

    speed.value = 2;
  } else if (speed.value == 2) {
    if (!mobile.value) {
      injectMessage.error("请输入新手机号");
      return;
    }
    if (!validate(mobile.value, "phone")) {
      injectMessage.error("请输入正确的新手机号");
      return;
    }
    post5f6c915d69d1f({
      mobile: mobile.value,
      code: code.value,
      type: 7,
    }).then((res) => {
      if (res.code == 1) {
        speed.value = 3;
        post661f7a29c8ae2({

        }).then((res) => {
          // console.log('user',res);
          if (res.code == 1) {
            userInfo.value = res.data;
            userStore.setUserInfo(res.data);
          }
        });
      }
    });
  } else if (speed.value == 3) {
    router.go(-1);
  }
}
// 获取验证码
let codeText = ref("获取验证码");
let timer = ref(null);
let codeTime = ref(60);
let is_code = ref(false);
function getCode() {
  if (is_code.value) return;
  if (!mobile.value) {
    injectMessage.error('请输入手机号');
    return;
  }
  if (!validate(mobile.value, 'phone')) {
    injectMessage.error('请输入正确的手机号');
    return;
  }
  is_code.value = true;
  post5b5bdc44796e8({
    mobile: mobile.value,
    type: 7,
    is_test: is_test,
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        if (is_test == 1) {
          injectMessage.success(`验证码为：${res.data.code}`);
        } else {
          injectMessage.success("验证码发送成功");
        }
        timer.value = setInterval(() => {
          codeText.value = `${codeTime.value}s`;
          if (codeTime.value <= 1) {
            codeText.value = "获取验证码";
            clearInterval(timer.value);
            codeTime.value = 0;
            is_code.value = false;
          } else {
            codeTime.value--;
          }
        }, 1000);
      } else {
        is_code.value = false;
      }
    })
    .catch((err) => {
      is_code.value = false;
    });
}
</script>

<style lang="scss" scoped>
.information {
  margin-top: 110px;
  margin-bottom: 24px;
  padding: 18px 16px;
  background: #fff;
  min-height: 270px;
  .steps {
    padding: 23.5px 0 38.5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .steps_item {
      display: flex;
      align-items: center;
      .steps_item_1 {
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, 0.39);
        border-radius: 50%;
        border: 1px solid #79848f;
        font-size: 7px;
        font-weight: 500;
        color: #79848f;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .steps_item_2 {
        font-size: 9px;
        font-weight: 400;
        color: #79848f;
        margin-left: 5px;
      }
    }
    .active_steps_item {
      .steps_item_1 {
        border: 1px solid #1f52ae !important;
        color: #1f52ae !important;
      }
      .steps_item_2 {
        color: #1f52ae !important;
      }
    }
    .item_line {
      width: 65px;
      height: 1px;
      background: #9fa7b4;
      margin: 0 20px;
      position: relative;
      .item_line_1 {
        width: 50%;
        height: 1px;
        background: #1f52ae;
        position: absolute;
        left: 0;
        top: 0;
      }
      .item_line_2 {
        width: 100%;
        height: 1px;
        background: #1f52ae;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
  .input_1 {
    width: 300px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #e5e5e5;
    padding: 6.5px 8px;
    font-size: 7px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    .input_1_line {
      width: 1px;
      height: 10px;
      background: #bfbfbf;
      margin: 0 12px;
    }
  }
  .input_2 {
    width: 300px;
    display: flex;
    margin: 16px auto 0;
    .input_2_1 {
      width: 232px;
      height: 20px;
      border-radius: 2px;
      border: 1px solid #e5e5e5;
      font-size: 7px;
      margin-right: 8px;
    }
    .input_2_2 {
      background: #edf1f9;
      border: 1px solid #1f52ae;
      border-radius: 2px;
      width: 60px;
      height: 20px;
      color: #1f52ae;
      font-size: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
  .input_3 {
    width: 300px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #e5e5e5;
    font-size: 7px;
    margin: 16px auto 0;
  }
  .success_info {
    text-align: center;
    .success_icon {
      width: 40px;
      height: 40px;
    }
    .success_text_1 {
      font-size: 9px;
      font-weight: 500;
      margin-top: 12px;
    }
    .success_text_2 {
      font-size: 7px;
      color: #666;
      margin-top: 12px;
    }
  }
}

.save_btn {
  width: 120px;
  height: 24px;
  background: #1f52ae;
  font-size: 8px;
  color: #fff;
  border-radius: 3px;
  margin: 32px auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>